import React from 'react'
import { Button, Card, Col, Container, ListGroup, Row } from 'react-bootstrap'

export default function Component() {
  return (
    <div style={{ backgroundColor: '#333', color: '#fff', minHeight: '100vh' }}>
      <Container className="py-5">
        <Row>
          <Col md={4} className="text-center mb-4">
            <img
              src="/placeholder.svg?height=200&width=200"
              alt="Marisda Gratia Daso"
              className="img-fluid rounded-circle mb-3"
              style={{ border: '5px solid #000', maxWidth: '200px' }}
            />
            <h1 className="h2 mb-3">Marisda Gratia Daso</h1>
            <div className="mb-3">
              <p className="mb-1"><i className="bi bi-geo-alt-fill me-2"></i>Jalan Gading Kerja no.23, Malang</p>
              <p className="mb-1"><i className="bi bi-telephone-fill me-2"></i>0812-3456-7890</p>
              <p className="mb-1"><i className="bi bi-envelope-fill me-2"></i>marisdaa@gmail.com</p>
            </div>
          </Col>
          <Col md={8}>
            <section className="mb-5">
              <h2 className="h3 border-bottom border-dark pb-2 mb-3">Tentang Saya</h2>
              <p>Ingin menjadikan hobi menggambar sebagai pekerjaan</p>
            </section>
            
            <Row>
              <Col md={6}>
                <section className="mb-5">
                  <h2 className="h3 border-bottom border-dark pb-2 mb-3">Pendidikan</h2>
                  <ListGroup variant="flush">
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">S1 DKV ISTTS</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2020-2024</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">SMAK Santa Agnes Surabaya</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2017-2020</span>
                    </ListGroup.Item>
                  </ListGroup>
                </section>
              </Col>
              <Col md={6}>
                <section className="mb-5">
                  <h2 className="h3 border-bottom border-dark pb-2 mb-3">Pengalaman Kerja</h2>
                  <ListGroup variant="flush">
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">Illustrator</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2023-Sekarang</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">Magang, Studio stutter</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2022-2023</span>
                    </ListGroup.Item>
                  </ListGroup>
                </section>
              </Col>
            </Row>
            
            <section>
              <h2 className="h3 border-bottom border-dark pb-2 mb-3 d-flex justify-content-between align-items-center">
                Keterampilan
                <Button
                  variant="link"
                  className="text-white p-0"
                  data-bs-toggle="collapse"
                  data-bs-target="#skillsCollapse"
                  aria-expanded="false"
                  aria-controls="skillsCollapse"
                >
                  <i className="bi bi-list fs-2"></i>
                </Button>
              </h2>
              <div className="collapse" id="skillsCollapse">
                <Row>
                  <Col md={6}>
                    <Card className="mb-3" style={{ backgroundColor: '#444', borderColor: '#000' }}>
                      <Card.Body>
                        <h4 className="h5 card-title">Desain Grafis</h4>
                        <ul className="list-unstyled mb-0">
                          <li>Artflow</li>
                          <li>Infinite Painter</li>
                        </ul>
                      </Card.Body>
                    </Card>
                  </Col>
                  <Col md={6}>
                    <Card style={{ backgroundColor: '#444', borderColor: '#000' }}>
                      <Card.Body>
                        <h4 className="h5 card-title">Bahasa</h4>
                        <ul className="list-unstyled mb-0">
                          <li>Inggris (Dasar)</li>
                        </ul>
                      </Card.Body>
                    </Card>
                  </Col>
                </Row>
              </div>
            </section>
          </Col>
        </Row>
      </Container>
    </div>
  )
}import React from 'react'
import { Button, Card, Col, Container, ListGroup, Row } from 'react-bootstrap'

export default function Component() {
  return (
    <div style={{ backgroundColor: '#333', color: '#fff', minHeight: '100vh' }}>
      <Container className="py-5">
        <Row>
          <Col md={4} className="text-center mb-4">
            <img
              src="/placeholder.svg?height=200&width=200"
              alt="Marisda Gratia Daso"
              className="img-fluid rounded-circle mb-3"
              style={{ border: '5px solid #000', maxWidth: '200px' }}
            />
            <h1 className="h2 mb-3">Marisda Gratia Daso</h1>
            <div className="mb-3">
              <p className="mb-1"><i className="bi bi-geo-alt-fill me-2"></i>Jalan Gading Kerja no.23, Malang</p>
              <p className="mb-1"><i className="bi bi-telephone-fill me-2"></i>0812-3456-7890</p>
              <p className="mb-1"><i className="bi bi-envelope-fill me-2"></i>marisdaa@gmail.com</p>
            </div>
          </Col>
          <Col md={8}>
            <section className="mb-5">
              <h2 className="h3 border-bottom border-dark pb-2 mb-3">Tentang Saya</h2>
              <p>Ingin menjadikan hobi menggambar sebagai pekerjaan</p>
            </section>
            
            <Row>
              <Col md={6}>
                <section className="mb-5">
                  <h2 className="h3 border-bottom border-dark pb-2 mb-3">Pendidikan</h2>
                  <ListGroup variant="flush">
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">S1 DKV ISTTS</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2020-2024</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">SMAK Santa Agnes Surabaya</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2017-2020</span>
                    </ListGroup.Item>
                  </ListGroup>
                </section>
              </Col>
              <Col md={6}>
                <section className="mb-5">
                  <h2 className="h3 border-bottom border-dark pb-2 mb-3">Pengalaman Kerja</h2>
                  <ListGroup variant="flush">
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">Illustrator</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2023-Sekarang</span>
                    </ListGroup.Item>
                    <ListGroup.Item className="d-flex justify-content-between align-items-start" style={{ backgroundColor: '#444', color: '#fff', borderColor: '#000' }}>
                      <div className="ms-2 me-auto">
                        <div className="fw-bold">Magang, Studio stutter</div>
                      </div>
                      <span className="badge bg-primary rounded-pill">2022-2023</span>
                    </ListGroup.Item>
                  </ListGroup>
                </section>
              </Col>
            </Row>
            
            <section>
              <h2 className="h3 border-bottom border-dark pb-2 mb-3 d-flex justify-content-between align-items-center">
                Keterampilan
                <Button
                  variant="link"
                  className="text-white p-0"
                  data-bs-toggle="collapse"
                  data-bs-target="#skillsCollapse"
                  aria-expanded="false"
                  aria-controls="skillsCollapse"
                >
                  <i className="bi bi-list fs-2"></i>
                </Button>
              </h2>
              <div className="collapse" id="skillsCollapse">
                <Row>
                  <Col md={6}>
                    <Card className="mb-3" style={{ backgroundColor: '#444', borderColor: '#000' }}>
                      <Card.Body>
                        <h4 className="h5 card-title">Desain Grafis</h4>
                        <ul className="list-unstyled mb-0">
                          <li>Artflow</li>
                          <li>Infinite Painter</li>
                        </ul>
                      </Card.Body>
                    </Card>
                  </Col>
                  <Col md={6}>
                    <Card style={{ backgroundColor: '#444', borderColor: '#000' }}>
                      <Card.Body>
                        <h4 className="h5 card-title">Bahasa</h4>
                        <ul className="list-unstyled mb-0">
                          <li>Inggris (Dasar)</li>
                        </ul>
                      </Card.Body>
                    </Card>
                  </Col>
                </Row>
              </div>
            </section>
          </Col>
        </Row>
      </Container>
    </div>
  )
}